<template>
  <div style="padding: 10px">
    <t-card title="物料">
      <t-form label-align="right" layout="inline" label-width="80px">
        <t-row :gutter="12">
          <t-col :span="3" class="form_col">
            <t-form-item label="料号" name="FNumber" class="form_item">
              <t-input v-model="formData.FNumber" placeholder="请输入料号" />
            </t-form-item>
          </t-col>
          <t-col :span="3" class="form_col">
            <t-form-item label="规格型号" name="FSpecification" class="form_item">
              <t-input v-model="formData.FSpecification" placeholder="请输入规格型号" />
            </t-form-item>
          </t-col>

          <t-col :span="3" class="form_col">
            <t-form-item label="物料分组" name="FMaterialGroup" class="form_item">
              <!-- <t-tree-select v-model="formData.FMaterialGroup" :data="materGroupList" clearable placeholder="请选择" /> -->
              <t-input v-model="formData.FMaterialGroupName" placeholder="">
                <template #suffixIcon>
                  <!-- <MarkupIcon /> -->
                  <t-icon name="search" :style="{ cursor: 'pointer' }" @click="clickShowMaterGroup" />
                  <!-- <search-icon  /> -->
                </template>
              </t-input>
            </t-form-item>
          </t-col>
          <t-col :span="3" class="form_col">
            <t-form-item label="名称" name="FName" class="form_item">
              <t-input v-model="formData.FName" placeholder="请输入名称" />
            </t-form-item>
          </t-col>
          <t-col :span="3" class="form_col">
            <t-form-item label="图号" name="F_ora_Text1" class="form_item">
              <t-input v-model="formData.F_ora_Text1" placeholder="请输入图号" />
            </t-form-item>
          </t-col>
          <t-col :span="3" class="form_col">
            <t-form-item label="品牌" name="F_ora_Text" class="form_item">
              <t-input v-model="formData.F_ora_Text" placeholder="请输入图号" />
            </t-form-item>
          </t-col>
          <t-col :span="3" class="form_col">
            <t-form-item label="禁用状态" name="FForbidStatus" class="form_item">
              <t-select v-model="formData.FForbidStatus" placeholder="请选择">
                <t-option label="请选择" value="">请选择</t-option>
                <t-option label="否" value="A">否</t-option>
                <t-option label="是" value="B">是</t-option>
              </t-select>
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </t-card>
    <div style="margin-top: 10px; display: flex; flex-direction: column">
      <t-space align="end" style="align-self: flex-end">
        <t-button theme="success" @click="clickUpload">上传excel</t-button>
        <t-button theme="primary" @click="clickExport">excel导出</t-button>
        <t-button theme="warning" @click="loadData">查询</t-button>
        <t-button theme="danger" @click="clickAdd">新增</t-button>
      </t-space>
      <t-table
        row-key="FMATERIALID"
        :data="dataList"
        :columns="columns"
        :resizable="true"
        :loading="loading"
        :stripe="stripe"
        bordered
        :hover="true"
        table-layout="auto"
        size="small"
        :pagination="pagination"
        cell-empty-content="-"
        resizable
        lazy-load
        @row-click="handleRowClick"
      >
        <template #operation="{ row }">
          <!-- <t-button theme="primary" shape="circle" variant="base"><calendar-icon slot="icon" /></t-button> -->
          <t-button theme="primary" shape="square" hover="color" @click="handleClickEdit(row)">
            <template #icon>
              <t-icon name="edit" :style="{ cursor: 'pointer' }" />
            </template>
          </t-button>

          <t-button theme="primary" shape="square" hover="color" @click="handleClickDetail(row)">
            <template #icon>
              <t-icon name="info-circle" :style="{ cursor: 'pointer' }" />
            </template>
          </t-button>

          <t-popconfirm content="确认删除吗？" @confirm="clickDelMater(row)">
            <t-button theme="danger" shape="square">
              <template #icon>
                <t-icon name="delete" :style="{ cursor: 'pointer' }" />
              </template>
            </t-button>
          </t-popconfirm>
          <t-popconfirm
            :content="row['FForbidStatus'] == 'B' ? '确认取消禁用吗？' : '确认禁用吗？'"
            @confirm="clickForbMater(row)"
          >
            <t-button theme="warning" ghost hover="color">
              {{ row['FForbidStatus'] == 'B' ? '取消禁用' : '禁用' }}
            </t-button>
          </t-popconfirm>
        </template>
      </t-table>
    </div>
    <uploadDialog
      ref="uploadRef"
      :dl-url="filePrefix + '料号引入模板.xlsx'"
      :upload-url="API_URL + 'material/uploadMaterialList'"
      @upload-success="loadData"
    />

    <detail ref="detailRef" @update-data="loadData" />

    <mater-group-dialog ref="materGroupDialogRef" @on-confirm="onMaterGroupChange" />
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import columns from './columns/index';
import {
  queryMaterialList,
  delMaterial,
  queryMaterialGroupList,
  exportData,
  enableMaterial,
  forbidMaterial,
} from '@/service/material';
import { downloadRes } from '@/common/download';
import uploadDialog from '@/components/uploadDialog/index.vue';
import { filePrefix, API_URL } from '@/common/constants';
import MaterGroupDialog from './components/materGroupDialog.vue';

import Detail from './components/detail.vue';
import router from '@/router';

export default {
  components: { Detail, uploadDialog, MaterGroupDialog },
  setup(props) {
    const formData = reactive({ FMATERIALID: '' });
    // const formData = reactive({ FMATERIALID: 111204, FDocumentStatus: '', FName: '伺服电机' })
    const detailRef = ref();
    const total = ref(300);
    const loading = ref(false);
    const materGroupList = ref([]);
    const uploadRef = ref();
    const materGroupDialogRef = ref();

    const curr_page = ref(1);
    const page_size = ref(10);

    const dataList = ref([]);
    const pagination = computed(() => {
      return {
        defaultCurrent: 1,
        defaultPageSize: page_size.value,
        total: total.value,
        onChange: (pageInfo) => {
          const { current, pageSize } = pageInfo;
          curr_page.value = current;
          page_size.value = pageSize;
          loadData();
        },
      };
    });

    const clickUpload = () => {
      uploadRef.value.openExcelDialog();
    };

    const clickDelMater = async (row) => {
      const res = await delMaterial(row.FNumber);
      if (res.success) {
        MessagePlugin.success('删除成功！');
        loadData();
      } else {
        MessagePlugin.error(`删除失败:${res.msg}`);
      }
    };

    const clickForbMater = async (row) => {
      let res = null;
      if (row.FForbidStatus == 'B') {
        res = await enableMaterial(row.FNumber);
      } else {
        res = await forbidMaterial(row.FNumber);
      }
      if (res.success) {
        loadData();

        MessagePlugin.success('操作成功！');
      } else {
        MessagePlugin.error(`操作失败:${res.msg}`);
      }
    };

    const clickExport = async () => {
      const res = await exportData({
        ...formData,
        // curr_page: curr_page.value,
        // page_size: page_size.value,
      });

      downloadRes('PBOM', res);
    };

    const handleRowClick = (e) => {
      console.log(e);
    };

    const handleClickEdit = (row) => {
      router.push({ name: 'materialEdit', params: { id: row.FMATERIALID } });
    };
    const handleClickDetail = (row) => {
      router.push({ name: 'materialDetail', params: { id: row.FMATERIALID } });
    };

    const loadMaterGroup = async () => {
      const res = await queryMaterialGroupList({});
      if (res) {
        materGroupList.value = res.dataList;
        console.log('loadMaterGroup', materGroupList.value);
      }
    };

    const clickAdd = () => {
      // console.log('detailRef', detailRef);
      // detailRef.value.openModal();
      router.push({ name: 'materialAdd' });
    };

    const loadData = async () => {
      loading.value = true;
      const res = await queryMaterialList({
        ...formData,
        curr_page: curr_page.value,
        page_size: page_size.value,
      });
      dataList.value = res.dataList;
      // total.value = res.length;
      total.value = res.total;
      console.log('res', res);
      loading.value = false;
    };

    const clickShowMaterGroup = () => {
      materGroupDialogRef.value.openGroupDialog();
    };

    const onMaterGroupChange = (materGroup) => {
      Object.assign(formData, { FMaterialGroup: materGroup.FID, FMaterialGroupName: materGroup.FName });
    };

    onMounted(() => {
      loadMaterGroup();
      loadData();
    });

    return {
      detailRef,
      columns,
      pagination,
      total,
      formData,
      dataList,
      loadData,
      handleClickEdit,
      loading,
      clickAdd,
      handleRowClick,
      curr_page,
      page_size,
      materGroupList,
      clickUpload,
      clickExport,
      filePrefix,
      uploadRef,
      API_URL,
      clickDelMater,
      materGroupDialogRef,
      clickShowMaterGroup,
      onMaterGroupChange,
      clickForbMater,
      handleClickDetail,
    };
  },
};
</script>
<style>
.form_col {
  margin-top: 15px;
}

.form_item {
  width: 90%;
}
</style>
